<template>
  <div class="live">
    <header>
      直播管理
      <div class="search">
        <li>
          直播状态:
          <select v-model="select" @change="area(select)">
            <option v-for="(item,index) in option" :key="index">{{item.text}}</option>
          </select>
        </li>&emsp;
        <li class="broker_search">
          经纪人搜索:
          <div class="button">
            <input type="text" @input="search(value)" v-model="value" />
            <van-icon name="search" class="magnifying" />
          </div>
        </li>
      </div>
    </header>
    <main>
      <div class="sinatv">
        <div class="sinatv_one" v-for="(item,index) in list" :key="index">
          <img src="https://img2.baidu.com/it/u=1758770234,3963355910&fm=26&fmt=auto" alt />
          <p>{{item.word}}</p>
          <p>
            <span>{{item.name}}</span>
            <span>{{item.time}}</span>
          </p>
          <p>
            <span @click="live(item.id)">{{JSON.parse(item.one)?"直播中":"已结束"}}</span>
            <span>
              <a-switch
                :v-model="JSON.parse(item.one)"
                checked-children="开"
                un-checked-children="关"
                :default-checked="JSON.parse(item.one)"
              />
            </span>
          </p>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
      select: "请选择",
      value: "",
      option: [
        { text: "请选择", value: "请选择" },
        { text: "直播中", value: "直播中" },
        { text: "已结束", value: "已结束" }
      ]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //获取数据
    getList() {
      axios({
        url: "/api/lists",
        method: "post"
      }).then(res => {
        this.list = res.data.data;
      });
    },
    //按姓名搜索
    search(value) {
      axios({
        url: "/api/search",
        method: "post",
        data: { value: value }
      }).then(res => {
        this.list = res.data.data;
      });
    },
    //数据筛选
    area(select) {
      axios({
        url: "/api/live",
        method: "post",
        data: {
          select: select
        }
      }).then(res => {
        this.list = res.data.data;
      });
    },
    live(id) {
      this.$router.push(`/live_broadcast/` + id);
    }
  }
};
</script>

<style scoped>
.sinatv {
  width: 100%;
  height: 570px;
  display: flex;
  flex-wrap: wrap;
}
.sinatv_one {
  width: 150px;
  height: 180px;
  margin-left: 30px;
  margin-top: 5px;
}
.sinatv .sinatv_one img {
  width: 100%;
  height: 100px;
}
.sinatv_one p {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.sinatv_one p span {
  font-size: 12px;
}
.group {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  height: 30px;
  margin-left: 10px;
}
main {
  width: 100%;
  height: 100%;
  flex: 1;
  overflow-y: auto;
  margin-top: 60px;
}
li select {
  width: 250px;
  height: 30px;
  margin-left: 10px;
}
.search {
  width: 100%;
  display: flex;
  margin-left: 10px;
  margin-top: 10px;
}
.search select {
  width: 100px;
  height: 30px;
}
.search button {
  width: 80px;
  height: 30px;
  margin-left: 30px;
}
.broker_search {
  display: flex;
}
.broker_search input {
  height: 30px;
}
.button {
  width: 200px;
  height: 30px;
  display: flex;
  align-items: center;
  background: #f5f7fa;
  border-radius: 5px;
  border: 1px solid #000;
}
.button input {
  border-radius: 5px;
  height: 28px;
  border: none;
  outline: none;
  background: none;
}
.magnifying {
  font-size: 18px;
}
</style>